<template>
<!--  <el-container>-->
<!--    <el-header>-->
<!--      <el-row>-->
<!--        <el-col-->
<!--            :span="4"-->
<!--            :offset="20"-->
<!--        >-->
<!--          <el-image-->
<!--              :src="logo_path"-->
<!--              style="height: 80px"-->
<!--          ></el-image>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </el-header>-->

    <el-main>

      <el-row>
        <!--        下面是左半部分的布局-->
        <el-col :span="8">
          <el-row class="text">
            <el-col :span="2"></el-col>
            <el-col :span="22"><h1>FAPE</h1></el-col>
          </el-row>
          <el-row>
            <el-col :span="2"></el-col>
            <el-col :span="22"><h1>校内复习平台</h1></el-col>
          </el-row>
          <el-row>
            <el-col :span="2"></el-col>
            <el-col :span="22">
              <div class="underline"></div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2"></el-col>
            <el-col :span="22">
              <el-image :src="require('@/assets/img/your-problem.png')" style="margin-top: 15px"></el-image>
            </el-col>
          </el-row>


        </el-col>

        <el-col :span="6"></el-col>
        <!--下面是右半部分的设计-->
        <el-col :span="10">

          <el-card class="radius">
            <el-image :src="require('@/assets/img/welcome.png')" class="welcome_img" @click="gotoInputView"></el-image>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

<!--  </el-container>-->
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
import {useRouter} from "vue-router";

export default defineComponent({
  name: 'Home',
  setup() {
    const router = useRouter();
    const logo_path = ref();
    const gotoInputView = () =>{
      router.push("/input");
    }

    onMounted(() => {
      logo_path.value = require('@/assets/img/fape-logo.jpg');
    });
    return {
      logo_path,
      gotoInputView,
    }
  }
});
</script>

<style>



.el-header {
  width: 1024px;
  height: 80px !important;
  background: #FFF;
}



h1 {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 45px;
  color: #FFFFFF;
  text-align: left;
  margin: 6px;

}

.text {
  margin-top: 20px;
}

.underline {

  margin-top: 10px;
  border-bottom: 5px solid #FFFFFF;
}

.radius {
  border-radius: 8%!important;
  margin-top: 80px;
  margin-right: 30px;
}

.welcome_img {
  width: 80%!important;
  height: 80%!important;


}
</style>
